<template>
  <div>
    <div class="avatar">
      <img :src="info.avatar">
      <p>欢迎您，{{info.nickName}}</p>
    </div>
    <div class="info">
      <ul>
        <li class="hairlines-right">
          <p class="money">{{info.quota}}</p>
          <p class="explain">可用额度(元)</p>
        </li>
        <li>
          <p class="money">{{info.arrears}}</p>
          <p class="explain">待还金额(元)</p>
        </li>
      </ul>
    </div>
    <div class="menus">
      <a v-for="(menu, index) in menus" :key="index" v-on:click.prevent='go(index)' :class="{'hairlines-top': index >= 3, 'hairlines-right-pseudo': (index !== 2 || index !== 5)}">
        <i class="iconfont" :class="menu.icon" :style="menu.style"></i>
        <p class="title">{{menu.title}}<i v-if="menu.new"></i></p>
      </a>
    </div>
    <nav-tem :activeIndex="activeIndex"></nav-tem>
    <bind :show="bindShow" @close="closePhone"></bind>
  </div>
</template>

<script>
  import Nav from '@/components/index/nav'
  import bind from '../bind/bind.vue'

  export default {
    name: 'mine',
    components: {
      'nav-tem': Nav,
      'bind': bind
    },
    data () {
      return {
        title: '爱尚丰',
        activeIndex: 2,
        bindShow: false,
        menus: [
          {icon: 'icon-renzheng1', title: '认证中心', link: '/profile/manage', style: 'background: #feaa25', new: false},
          {icon: 'icon-yinxingqia', title: '我的丰期', link: '/mine/bill', style: 'background: #72a5ef', new: false},
          {icon: 'icon-dingdan', title: '订单管理', link: '/mine/order', style: 'background: #ff6161', new: false},
          {icon: 'icon-question', title: '常见问题', link: '/mine/help', style: 'background: #49cbb4', new: false},
          {icon: 'icon-xiaoxizhongxin', title: '消息通知', link: '/mine/news', style: 'background: #fe877e', new: false},
          {icon: 'icon-changyonggongneng', title: '更多功能', link: '/more', style: 'background: #9290fb', new: false}
        ]
      }
    },
    computed: {
      info () {
        return this.$store.state
      },
      isBind () {
        return this.$store.state.isBindPhone
      }
    },
    methods: {
      bindPhone: function () {
        this.bindShow = true
      },
      closePhone: function () {
        this.bindShow = false
      },
      go: function (index) {
        if (index === 0) {
          if (this.isBind) {
            this.$router.push('/profile/manage')
          } else {
            this.bindPhone()
          }
        } else if (index === 1) {
          this.$router.push('/mine/bill')
        } else if (index === 2) {
          this.$router.push('/mine/order')
        } else if (index === 3) {
          this.$router.push('/mine/help')
        } else if (index === 4) {
          this.$router.push('/mine/news')
        } else if (index === 5) {
          this.$router.push('/more')
        }
      }
    },
    created () {
      this.setTitle(this.title)
      this.api.getUserInfo()
      this.api.hasNewMsg(() => {
        // console.log(111)
        this.menus[4].new = true
      })
      this.api.getBillDetail()
    }
  }
</script>

<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .avatar{
    padding: rem(85) 0;
    background: #72a5ef;
    img{
      display: block;
      margin: 0 auto rem(15) auto;
      width: rem(118);
      height: rem(118);
      border-radius: 50%;
    }
    p{
      font-size: rem(30);
      color: #fff;
      text-align: center;
    }
  }
  .info{
    margin-bottom: rem(15);
    padding: rem(35) 0;
    background: #fff;
    ul{
      display: flex;
      li{
        width: 50%;
        text-align: center;
        .money{
          margin-bottom: rem(3);
          font-size: rem(44);
          color: #ff7612;
        }
        .explain{
          font-size: rem(24);
          color: #999;
        }
      }
    }
  }
  .menus{
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    a{
      display: block;
      padding: rem(35);
      width: 33.3%;
      i{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto rem(20) auto;
        width: rem(75);
        height: rem(75);
        border-radius: 8px;
        font-size: rem(48);
        color: #fff;
      }
      .title{
        position: relative;
        font-size: rem(28);
        color: #212121;
        text-align: center;
        i{
          position: absolute;
          top: 3px;
          right: 5px;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #ed1c24;
        }
      }
    }
  }
</style>
